<template>
     <el-form :inline="true" :model="form" label-width="auto" style="padding: 10px;">
        <el-form-item label="账号">
          <el-input v-model="form.userName" disabled="action==edit"/>
        </el-form-item>
       <el-form-item label="姓名">
         <el-input v-model="form.nickname"/>
       </el-form-item>
          <div style="text-align:center;margin: 10px auto;">
            <el-button type="primary" @click="handleAdd">保存</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit} from '/http/sys-user.js'
    import {useDict} from '/http/options.js'
    import cmeditor from "../../component/cmeditor.vue";
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
      components: {cmeditor},
        props:{
          initParams:Object
        },
        setup(props,context){
          const dict = ref({});
          useDict(dict,'driver');
            const form=reactive({
              id:'',
              userName:'',
              nickname:'',
              password:''
            })
          const handleAdd = ()=>{
              if(action.value=='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }


          const handleCancel = ()=>{
              context.emit('close',false)
          }
          const action = ref('edit');

          loginUser().then(res=>{
            console.log(res)
          })


          onMounted(()=>{
            if(props.initParams){
              Object.assign(form,props.initParams)
              action.value= 'edit'
              selectFirstRow();
            }else{
              action.value= 'add'
            }
          })


          return{
            form,handleAdd,handleCancel,action,dict
          }
        }
    }
</script>

<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
.header {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  margin: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>